import './index.less'

export const MemberList = props => {
  const call = phone => {
    Taro.makePhoneCall({
      phoneNumber: phone
    })
  }

  const getClassName = status => {
    switch(status) {
      case 0:
        return 'unpaid'
      case 1:
        return 'pay'
      case 2:
        return 'overdue'
    }
  }

  return (
    <View className="member-list">
      {
        props.data.map(item => (
          <View className="item" key={ item.id }>
            <Navigator url={ `/pages/memberInfo/index?memberId=${ item.id }` } hoverClass="none" className="left">
              <Image src={ item.imgUrl } />
              <View className="info">
                <View>
                  <Text className="name">{ item.name }</Text>
                  <Text className={ `tag ${ getClassName(item.status) }` }>{ item.statusStr }</Text>
                </View>
                <Text>{ item.mobile }</Text>
              </View>
            </Navigator>
            <View className="right">
              {
                item.status
                ?
                <View className="icon" onClick={ props.showModal.bind(this, item.id, item.expiredTime) }>
                  <Image src={ require('../../assets/images/vip_icon.png') } />
                  <View>续费</View>
                </View>
                :
                <View className="icon" onClick={ props.showModal.bind(this, item.id, item.expiredTime) }>
                  <Image src={ require('../../assets/images/no_vip_icon.png') } />
                  <View>开通</View>
                </View>
              }
              <View className="line"></View>
              <View className="icon" onClick={ call.bind(this, item.mobile) }>
                <Image src={ require('../../assets/images/dial.png') } />
                <View>电话</View>
              </View>
            </View>
          </View>
        ))
      }
    </View>
  )
}

MemberList.defaultProps = {
  data: [],
  showModal: () => {}
}